<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5.cors解决跨域_复杂请求</title>
</head>

<body>
    <button onclick="getStudents()">获取学生列表</button>
    <script type="text/javascript">
        async function getStudents() {
            // const url = "http://127.0.0.1:8081/students";
            const url = "http://localhost:8081/students";
            // 简单请求
            // 1. 请求方法为 GET / HEAD / POST 中的一种
            // 2. 请求头字段符合 CORS 安全规范（不要手动修改请求头，一般都能符合该规范）
            // 3. 请求头的 Content-Type 的值只能是以下三种中的一种
            //      text/plain;  multipart/form-data;  application/x-www-form-urlencoded
            // 复杂请求会先发起一次预检请求
            const response = await fetch(url, {
                method: 'GET',
                headers: {
                    school: 'abc',
                    // 'Content-Type': 'text/plain',
                    // 'Content-Type': 'multipart/form-data',
                    // 'Content-Type': 'application/x-www-form-urlencoded',
                    // 'Content-Type': 'application/json', // 会导致请求变为复杂请求

                }
            });
            let data = await response.json()
            console.log(data);
            console.log('headers = ', response.headers.get('abc'));
        }
    </script>
</body>

</html>